<template>
	<view class="bg-white" style="height: 100vh; width: 100vw;">
		<scroll-view scroll-y="true" style="height: 100%;width: 100%;">
			<cu-custom bgColor="bg-white" :isBack="true">
				<block slot="content">
					<text style="font-size: 32rpx;">期刊</text>
				</block>
			</cu-custom>
			
			<view class="flex" style="margin-top: 16rpx; padding: 0 32rpx;">
				<view style="width: 160rpx; height: 224rpx;">
					<image :src="journalList.cover" mode="aspectFit" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="flex flex-direction justify-between" style="margin-left: 32rpx;">
					<view class="">
						<view class="" style="color: #333333; font-size: 28rpx; font-weight: bold;">
							{{journalList.title}}
						</view>
						<view class="" style="color: #666666; font-size: 28rpx; margin-top: 16rpx;">
							{{journalList.description}}
						</view>
					</view>
					<view class="" style="color: #666666; font-size: 20rpx; margin-top: 16rpx;">
						阅读量{{journalList.viewCount}}
					</view>
				</view>
			</view>
			
			<view class="flex flex-direction" style="margin-top: 32rpx; padding: 0 32rpx;">
				<view style="padding: 20rpx 0; font-size:28rpx; font-weight: bold; color: #333333;">
					{{currentNumber.split('-')[0] + '年' + currentNumber.split('-')[1] + '期'}}
				</view>

				<view v-for="(item,index) in subjectVoList" :key="index" @click="$Router.push({name:'journalDetail', params:{journalSubjectId: item.id}})" class="flex flex-direction justify-between" style="padding: 16rpx 0;">
					<view style="font-size:28rpx; color: #666666;line-height: 48rpx;">
						·{{item.subTitle}}
					</view>
					<view style="margin-top: 16rpx; margin-left: 14rpx;font-size: 24rpx; color: #999999; line-height: 32rpx;" >
						{{item.authorName.join(';')}}
					</view>
				</view>
				<button style="margin-top: 32rpx; font-size: 24rpx; color: #979797;" type="default" @click="showMore">
					{{isMore? '收起': '查看更多'}}
				</button>
			</view>
			<view class="subjectVoList.number" style="margin-top: 48rpx; padding: 0 32rpx;">
				<view style="font-size: 36rpx; font-weight: bold; color: #333333; line-height: 48rpx;">
					其他
				</view>
				<view v-for="(item, index) in otherNumber" :key="index" class="flex justify-between" style="padding: 32rpx 0;"
				@click="$Router.push({
					name: 'journalIndex',
					params: {
						journalId: journalId,
						currentNumber: item
					}
				})">
					<view style="font-size: 32rpx; color: #333333; line-height: 48rpx;">
						{{item.split('-')[0] + '年' + item.split('-')[1] + '期'}}
					</view>
					<view class="cuIcon-right" style="font-size: 40rpx;"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				journalId: this.$Route.query.journalId ? this.$Route.query.journalId : '12904',
				journalList: {},
				subjectVoList: [],
				subjectVoListBackUp: [],
				currentNumber: this.$Route.query.currentNumber ? this.$Route.query.currentNumber : '',
				otherNumber: [],
				isMore: false,
			}
		},
		onLoad() {
			if(this.currentNumber && this.currentNumber.length>0){
				this.$http.get('/edu/journal/getJournalIndexList/' + this.journalId + '/' + this.currentNumber).then((res) => {
					let data = res.data;
					if(data.success) {
						this.journalList = data.result;
						this.subjectVoListBackUp = data.result.subjectVoList;
						this.subjectVoList = this.subjectVoListBackUp.slice(0, 3);
						let number = this.journalList.number.split(',')
						this.otherNumber = [];
						for(let i=0; i<number.length; i++) {
							if(number[i] != this.currentNumber) {
								this.otherNumber.push(number[i])
							}
						}
					}else {
						console.log("data fail")
						console.log(data.message)
					}
				}).catch((err) => {
					console.log(err);
				})
			}else {
				this.$http.get('/edu/journal/getLatestJournalIndexList/' + this.journalId).then((res) => {
					let data = res.data;
					if(data.success) {
						this.journalList = data.result;
						this.subjectVoListBackUp = data.result.subjectVoList;
						this.subjectVoList = this.subjectVoListBackUp.slice(0, 3);
						let number = this.journalList.number.split(',')
						this.currentNumber = number[0];
						this.otherNumber = number.slice(1);
					}else {
						console.log("data fail")
					}
				}).catch((err) => {
					console.log(err);
				})
			}
		},
		methods: {
			showMore() {
				this.isMore = !this.isMore;
				if(this.isMore){
					this.subjectVoList = this.subjectVoListBackUp;
				}else {
					this.subjectVoList = this.subjectVoListBackUp.slice(0, 3);
				}
			}
		}
	}
</script>

<style>
</style>
